/**
 * 学习目标： React 事件处理
 *    语法：
 *      on事件类型={ 事件处理函数 }   比如`onClick={this.handleClick}`
 *    注意点💥：
 *      花括号内绑定的是事件处理函数，而不要写函数的调用。
 *    事件对象：
 *      事件处理函数的第一个参数为事件对象。
 */

import React from 'react'
import ReactDOM from 'react-dom'

// const handleClick = () => {
//   console.log('我被点击了', this) // undefined
// }

// export default {
//   data() {},
// }

class App extends React.Component {
  state = {
    msg: 'Hello',
  }

  // 🔔 React 组件自带的结构体，this 指向底层做过处理，如 render 结构指向为组件实例
  // ❌ 如果是自定义的函数，需要写成箭头函数写法，否则 this 指向为 undefined
  //
  render() {
    return (
      <>
        <h1>Hello React</h1>
        <button onClick={this.handleClick}>点击获取this，获取组件的实例</button>
      </>
    )
  }

  // 自定义函数，普通函数定义写法，this 指向函数自己，严格模式下为 undefined
  handleClick() {
    console.log('我被点击了', this) // undefined
  }

  // 🔔 箭头函数没有自己的 this，this 才会指向父级，也就是整个组件的实例
  handleClick = () => {
    console.log('我被点击了', this) // App
    console.log('能访问到组件的状态啦', this.state.msg)
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
